<template>
  <div>
    <h2>事件绑定指令</h2>
    <p>{{age}}</p>
    <!-- 事件绑定指令语法 v-no：事件名="处理程序" v-no:可以简化成@  -->
  <!-- <button v-no:事件名="处理程序">按钮</button> -->
  <!-- <button @事件名="处理程序">按钮</button> -->


  <!-- 事件处理程序，如果代码非常简单，直接写到<template>这个区域即可 -->
    <!-- 处理程序，代码只能使用vue中定义好的 data 数据或者methods方法 -->
  <button @click="age++">+1</button>

  <br/>
 <!-- 事件处理程序 如果代码非常多,可以用方法 方法必须定义到和data平级的methods中 -->
 <button @click="changeAge">-1</button>
  </div>
</template>

<script>
export default{
  // data 储存数据的
  data(){
    return{
      age:20
    }
  },
  // methods 是储存方法的
  methods: {
    changeAge(){
      // vue中 找data数据，methods方法。。。。都是通过this直接找(这是vue中固定的语法)
      this.age--
      console.log(123);
    }
  }
}
</script>

<style >

</style>
